<template>
	<view class="container">
		<view class="title">
			<text class="name">视频</text>
			<text class="tip">(限{{ vdoLimit }}个视频，大小不超过{{ vdoMax }}M,长度不超过30s)</text>
		</view>
		<videoUpload :video="videos" :limit="vdoLimit" :max="vdoMax" @onChange="videoChange" />
		<view class="title">
			<text class="name">图片</text>
			<text class="tip">(限{{ imgLimit }}张图片，单个图片大小不超过{{ imgMax }}M)</text>
		</view>
		<imageUpload :image="images" :limit="imgLimit" :max="imgMax" @onChange="imageChange" />
		<view class="btns">
			<button class="btn" type="default" @click="back">返 回</button>
			<button class="btn" type="primary" @click="submit">保 存</button>
		</view>
	</view>
</template>

<script>
import { isBlank } from '@/utils/validate';
import api from '@/api/api';
export default {
	data() {
		return {
			imgLimit: 9,
			imgMax: 10,
			vdoLimit: 1,
			vdoMax: 50,
			images: uni.getStorageSync('image'),
			videos: uni.getStorageSync('video'),
			image: [],
			video: [],
			imageData: {
				room_id: '',
				field_name: 'room_photo',
				field_value: ''
			},
			videoData: {
				room_id: '',
				field_name: 'room_video',
				field_value: ''
			}
		};
	},
	onLoad(e) {
		this.imageData.room_id = e.id;
		this.videoData.room_id = e.id;
		this.image = isBlank(this.images) ? [] : this.images.split(',');
		this.video = isBlank(this.videos) ? [] : this.videos.split(',');
	},
	onUnload() {
		uni.removeStorageSync('image');
		uni.removeStorageSync('video');
	},
	methods: {
		submit() {
			uni.showLoading({
				title: '保存中...'
			});
			this.imageData.field_value = this.image.join(',');
			this.videoData.field_value = this.video.join(',');
			api.roomInfo(this.videoData).then((res1) => {
				api.roomInfo(this.imageData).then((res) => {
					if (res.data.is_success) {
						uni.hideLoading();
						uni.showToast({
							title: '保存成功'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1000);
					} else {
						uni.hideLoading();
						uni.showToast({
							title: '保存失败',
							icon: 'none'
						});
					}
				});
			});
		},
		back() {
			uni.navigateBack();
		},
		imageChange(e) {
			this.image = e;
		},
		videoChange(e) {
			this.video = e;
		}
	}
};
</script>

<style lang="scss">
.container {
	padding: 20rpx;
	.title {
		margin-bottom: 20rpx;
		.name {
			font-size: 30rpx;
			font-weight: bold;
			margin-right: 20rpx;
		}
		.tip {
			font-size: 26rpx;
			color: $uni-secondary-color;
		}
	}
	.btns {
		margin-top: 100rpx;
		display: flex;
		justify-content: space-between;
		.btn {
			flex: 1;
			margin: 0 10rpx;
		}
	}
}
</style>
